<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="../lib/vue.min.js"></script>
<link rel="stylesheet" href="swiper/css/swiper.css">
<script src="swiper/js/swiper.js"></script>
<style>
  .swiper-container {
      width: 600px;
      height: 300px;
  }  
</style>
</head>
<body>
   
    <div id="box">
      
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="data in datalist">
                  {{data}}
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
          
        </div>
    </div>

    <script type="text/javascript">
       
		    new Vue({
          el:"#box",
          data:{
            datalist:[]
          },

          mounted() {
            setTimeout(()=>{
              this.datalist =["1111","2222","33333"] // 状态改完， 异步更新dom

              console.log(document.querySelectorAll(".swiper-slide").length)
              

              // swiper 初始化过早
            },2000)
          },

          updated() {
            new Swiper ('.a',{
                // direction: 'vertical'
                loop:true,
                    // 如果需要分页器
                pagination: {
                  el: '.swiper-pagination',
                }
              })
          },
        })
        
    </script>
</body>
</html>